<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>米醋儿分享看云模板分享免费下载</title>
    <meta name="description" content="仿看云模板免费下载" />
    <meta name="keywords" content="看云模板,仿看云,kancloud模板" />
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
        data-react-helmet="true" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link rel="stylesheet" type="text/css" href="{:config('web.cdn')}/static/layui/css/layui.css">
    <link rel="stylesheet" href="{:config('web.cdn')}/static/index/editormd/css/style.css" />
    <link rel="stylesheet" href="{:config('web.cdn')}/static/index/editormd/css/editormd.css" />
    <link rel="stylesheet" href="{:config('web.cdn')}/static/document/css/style.css" />



    <script type="text/javascript" src="{:config('web.cdn')}/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="{:config('web.cdn')}/static/js/vue.js"></script>
    <script type="text/javascript" src="{:config('web.cdn')}/static/layui/layui.js"></script>
    <script type="text/javascript" src="{:config('web.cdn')}/static/js/jquery.lazyload.min.js"></script>
    <script type="text/javascript" src="{:config('web.cdn')}/static/js/functions.js?"></script>
    <style>

        .window-body .workspace .article .kancloud-markdown-body pre{
            margin: 0!important;
            padding: 7px !important;
        }

        .wholerow:hover{
            background-color: #cce2ff;
            color: rgba(0,0,0,.87);
        }
        .window-body .workspace .article .article-body{
            width: 100%;
            max-width: 100%;
        }
        body{text-align: left !important;}
    </style>
</head>
<body>
<div id="#top_nav" style="display: none"></div>
    <div id="main">
        <div class="window-container">
            <img src="https://cover.kancloud.cn/hx18332717263/hx!middle"
                style="position: absolute; visibility: hidden" />
            <div>
                <div class="Loading__loading___1m_fZ">
                    <div class="Loading__bar___21yOt" style="
                background: rgb(33, 186, 69) none repeat scroll 0% 0%;
                width: 0%;
                display: none;
              ">
                        <div class="Loading__peg___3Y_28"></div>
                    </div>
                </div>
                <div class="Loading__spinner___11Pm4">
                    <div class="Loading__icon___3OOyu" style="display: none; border-color: rgb(33, 186, 69)"></div>
                </div>
            </div>
            <div class="window-body with-sidebar">
                <div class="sidebar">
                    <div class="sidebar-header">
                        <div class="search-form">
                            <div class="ui small fluid icon input">
                                <input type="text" v-model="title" @blur="save_title()" placeholder="请输入文档标题" />
                            </div>
                        </div>
                    </div>
                    <div class="sidebar-body">
                        <div class="catalog-body">
                            <ul>
                                <li v-for="(v,i) in mulu" :class="{'open':v.open==1}" >
                                    <div class="wholerow"  @click="open(v)"></div>
                                    <template  @click="open(v)">
                                        <template  v-if="v.child.length > 0">
                                            <template v-if="v.open == 0">
                                                <i class="icon caret right"></i>
                                            </template>
                                            <template v-else>
                                                <i class="icon caret down"></i>
                                            </template>

                                        </template>
                                        <template v-else>
                                            <i class="icon caret"></i>
                                        </template>
                                    </template>


                                    <a href="javascript:;" class="text">{{v.title}}</a>
                                    <span style="float: right;">
                                        <i @click="create_base_menu(v.id)" title="添加子菜单" class="layui-icon layui-icon-add-1"></i>
                                        <i @click="change(v)" title="修改当前菜单" class="layui-icon layui-icon-edit"></i>
                                        <template  v-if="v.child.length <= 0">
                                            <i @click="change_src(v)" title="编辑内容" class="layui-icon layui-icon-fonts-code"></i>
                                        </template>
                                        <template  v-if="v.child.length > 0">
                                            <i class="layui-icon"></i>
                                        </template>

                                    </span>

                                    <template v-if="v.child">
                                        <ul>
                                            <li v-for="(vv,ii) in v.child">
                                                <div class="wholerow"></div>
                                                <i class="icon"></i><a href="javascript:;" class="text">{{vv.title}}</a>
                                                <span style="float: right; margin-right: 26px">
                                                    <i @click="change(vv)" title="修改当前菜单" class="layui-icon layui-icon-edit"></i>
                                                    <i  @click="change_src(vv)" title="编辑内容" class="layui-icon layui-icon-fonts-code"></i>
                                                </span>
                                            </li>

                                        </ul>
                                    </template>
                                </li>
                                <li class="open" @click="create_base_menu({$id})">
                                    <div class="wholerow"></div>
                                    <i class="icon caret"></i>
                                    <a href="javascript:;" class="text">添加菜单</a>
                                </li>
                            </ul>
                        </div>
                    </div>




                    <div class="sidebar-copyright">
                        本文档由
                        <a href="https://micuer.com" target="_blank">micuer</a> 提供
                    </div>
                </div>
                <div class="workspace">
                    <iframe style="width: 100%; min-height: 980px" :src="src" frameborder="0"></iframe>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $("#showmenu").click(function () {
            if($(".window-body").hasClass("with-sidebar")){
                $(".window-body").removeClass("with-sidebar")
            }else{
                $(".window-body").addClass("with-sidebar")
            }
        });
        $("#right_tools").click(function () {
            if($(".menu").hasClass("visible")){
                $(".menu").removeClass("visible")
            }else{
                $(".menu").addClass("visible")
            }
        });
        var app = new Vue({
            el: '#main',
            data: {
                id:"{$id}"//文档的id
                ,title:"{$res.title}" //文档的title
                ,temp:[]//当前编辑的文章
                ,mulu:{:json_encode($menu)}
                ,src:"{:url('Document/content_edit',['id'=>$id])}"
//                ,mulu:[
//                    {"id":'dsadasdasd',"title":"序言","child":[]},
//                    {"id":22,"title":"花里胡哨","child":[
//                        {"id":22,"title":"花里胡哨11"},
//                        {"id":22,"title":"花里胡哨22"}
//                    ]},
//                ] //文档的目录
            }
            ,methods: {
                save_title:function () {
                    var data = {
                        title:this.title
                        ,id:this.id
                    }
                    if(this.title.length < 2){
                        error("至少3个字符长度");
                        return false;
                    }
                    var url = "{:url('Document/save')}"
                    $.post(url,data,function (e) {
                        layer.closeAll()
                        if(e.code ==200){
                            success(e.msg)
                        }else {
                            error(e.msg);
                        }
                    })
                },
                open:function(v){
                  if(v.open == 0){
                      v.open = 1
                  }else {
                      v.open = 0
                  }
                },
                change_src:function(v){
                     this.src =    "{:url('Document/content_edit')}?id="+v.id
                },
                change:function (v) {
                    layer.prompt({title: '修改-'+v.title+"-为", formType: 2}, function(pass, index){
                        layer.close(index);
                        var data = {
                            title:pass
                            ,id:v.id
                        }
                        if(pass.length < 2){
                            error("至少3个字符长度");
                            return false;
                        }
                        var url = "{:url('Document/save')}"
                        $.post(url,data,function (e) {
                            layer.closeAll()
                            if(e.code ==200){
                                v.title = pass
                                success(e.msg)
                            }else {
                                error(e.msg);
                            }
                        })
                    });
                },
                create_base_menu:function (pid) {
                    var _this= this
                    if(pid == {$id}){
                        var temp = '顶级';
                    }else {
                        var temp = '子级';
                    }

                    layer.prompt({title: '添加'+temp+'菜单', formType: 2}, function(pass, index){
                        layer.close(index);
                        var data = {
                            title:pass
                            ,pid:pid
                        }
                        if(pass.length < 2){
                            error("至少3个字符长度");
                            return false;
                        }
                        var url = "{:url('Document/create')}"
                        $.post(url,data,function (e) {
                            layer.closeAll()
                            if(e.code ==200){
                                if(pid == {$id}){
                                    _this.mulu.push(e.data)
                                }else {
                                    var d = _this.mulu;
                                    for (var i =0; i< d.length; i++){

                                        if(e.data.pid == d[i].id){
                                            console.log(d[i])
                                            console.log(i)
                                            var temp = d[i].child;
                                            temp.push(e.data)
                                            d[i].child = temp
                                        }
                                    }
                                    _this.mulu = d;
                                }
                                success(e.msg)
                            }else {
                                error(e.msg);
                            }
                        })
                    });
                },

                login: function () {
                    if(!this.username){
                        error("用户名不能为空");
                    }
                    if(!this.password){
                        error("用户名不能为空");
                    }
                    layer.load()
                    var password = hex_md5(this.password);
                    var url = URL+"/api/user/login"
                    $.post(url,{username:this.username,password:password},function (e) {
                        layer.closeAll()
                        if(e.code ==200){
                            var from_url = $.cookie('formUrl');
                            if(from_url){
                                location.href = from_url;
                            }else {
                                location.href = 'https://www.qudong.com';
                            }
                        }else {
                            error("用户名或密码错误");
                        }
                    })
                }
                ,reg:function () {
                    location.href='https://hao.qudong.com/register';
                }
            },
            mounted:function(){
                //页面挂载需要运行的函数
            }
        })
</script>
        <script src="{:config('web.cdn')}/static/index/editormd/editormd.js"></script>

<script type="text/javascript">

    //图片上传js
    //md 编辑器
    var testEditor;
    $(function() {
        testEditor = editormd("test-editormd", {
            width           : "100%",
            height:'650px',
            //autoHeight      : true,
            path            : "{:config('web.cdn')}/static/index/editormd/lib/",
            imageUpload    : true,
            imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "{:url('Upload/mdeditor')}",
            htmlDecode      : "style,script,iframe",
            tex             : true,
            emoji           : true,
            taskList        : true,
            flowChart       : true,
            sequenceDiagram : true,
            onload : function() {
                // alert("onload");
                // this.setMarkdown("### onloaded");
                // console.log("onload =>", this, this.id, this.settings);
                //编辑器 拖拽上传
                var codeEditor = $(".CodeMirror")[0];
                codeEditor.ondragenter = function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    console.log("dragenter");
                    return false;
                };
                codeEditor.ondragover = function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    console.log("dragover");
                    return false;
                };
                codeEditor.ondrop = function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    console.log("drop");
                    var files = e.dataTransfer.files // 这里获取到用户拖放的文件
                    console.log('333333333333333333333333');
                    console.log(files);
                    // 其中 ajaxUpload是Ajax上传文件的函数
                    // uploadUrl是后端提供的上传地址, uploadCallback是上传后的回调函数，用于生成代码片段并插入编辑器
                    ajaxUpload('{:url(\'Upload/mdeditor\')}', files, uploadCallback);
                    return false;
                };
            },
            onfullscreen : function() {
                $(".navbar").css("display","none");
                $("#CreateUsers").css("display","none");
                $(".KmoreInfo").css("display","none");
                //alert("onfullscreen");
                // console.log("onfullscreen =>", this, this.id, this.settings);
            },

            onfullscreenExit : function() {
                // alert("onfullscreenExit");
                $(".navbar").css("display","block");
                $("#CreateUsers").css("display","block");
                $(".KmoreInfo").css("display","block");
                // console.log("onfullscreenExit =>", this, this.id, this.settings);
            }
        });


        $("#append-btn").click(function(){
            $.get("{:config('web.cdn')}/static/index/editormd/test.md", function(md){
                testEditor.appendMarkdown(md);
            });
        });
    });
    //ajax 上传文件
    function ajaxUpload(uploadUrl, files, callback) {
        console.log("my ajax upload begin");
        console.log(files[0]);
        var formData = new FormData();
        formData.append('file', files[0]);
        // 可以添加其他需要传给后端的参数
        $.ajax({
            url: uploadUrl,
            type: 'POST',
            data: formData,
            cache: false,
            contentType: false,    //不可缺
            processData: false,    //不可缺
            dataType: 'json',
            success: function(data) {
                console.log("result:", data);
                callback(data);
            },
            complete: function(data) {
            }
        });

        return false;
    }

    function uploadCallback(data) {
        var url = data.url; // 依据后端返回的数据格式而定
        var link = url;
        if (!url) return false;

        var alt = "";
        var cm = testEditor; // myEditormd是用editormd函数创建的编辑器对象，这里假设myEditor是全局变量
        var cursor = cm.getCursor(); // 获取光标位置
        if (url.endsWith(".mp4")) { // 如果是是视频
            var videoHtml = '<video class="video-js" controls preload="auto" width="100%" poster="" data-setup=\'{"aspectRatio":"16:9"}\'>\
	<source src="' + url + '" type=\'video/mp4\' >\
	<p class="vjs-no-js">\
	To view this video please enable JavaScript\
	</p>\
	</video>';
            videoHtml = "\n" + videoHtml + "\n"; // videoHtml是生成的HTML视频代码片段
            cm.replaceSelection(videoHtml); // 插入到编辑器中
            cm.setCursor(cursor.line, cursor.ch + 2);
            return;
        }
        // 以下是对图片上传结果的处理，引用原image-upload插件的代码
        var altAttr = (alt !== "") ? " \"" + alt + "\"" : "";
        if (link === "" || link === "http://")
        {
            cm.replaceSelection("![" + alt + "](" + url + altAttr + ")");
        }
        else
        {
            cm.replaceSelection("[![" + alt + "](" + url + altAttr + ")](" + link + altAttr + ")");
        }

        if (alt === "") {
            cm.setCursor(cursor.line, cursor.ch + 2);
        }
    }

    layui.use('form', function(){
        var form = layui.form;
        //文章提交保存
        form.on('submit(info)', function(data){
            var url = "{:url('article/save')}";
            layer.load();
            $.post(url,data.field,function (e) {
                if(e.code ==200){
                    success(e.msg);
                    setTimeout("location.reload()",2000);
                    layer.closeAll();
                }else {
                    layer.closeAll();
                    error(e.msg);
                }
            })
            return false;
        });
        form.on('submit(draft)', function(data){
            var temp = data.field;
            temp.status = 2; //草稿
            var url = "{:url('article/save')}";
            $.post(url,temp,function (e) {
                if(e.code ==200){
                    success(e.msg);
                    setTimeout("location.reload()",2000);
                }else {
                    error(e.msg);
                }
            })

        });

    });

    /**
     * 粘贴上传图片
     */
    $("#test-editormd").on('paste', function (ev) {
        var data = ev.clipboardData;
        var items = (event.clipboardData || event.originalEvent.clipboardData).items;
        for (var index in items) {
            var item = items[index];
            if (item.kind === 'file') {
                var blob = item.getAsFile();
                var reader = new FileReader();
                reader.onload = function (event) {
                    var base64 = event.target.result;
                    //ajax上传图片
                    $.post("{:url('Upload/paste_up')}",{base:base64}, function (ret) {
                        layer.msg(ret.msg);
                        if (ret.code == 1) {
                            //新一行的图片显示
                            //editor.insertValue("\n![" + ret.data.title + "](" + ret.data.path + ")");
                            uploadCallback(ret);
                        }
                    });
                }; // data url!
                var url = reader.readAsDataURL(blob);
            }
        }
    });



</script>

</body>

</html>